import {designComponent, designPage, getComponentCls, inject, onBeforeUnmount, onMounted, provide, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Button, ButtonGroup, Checkbox, Input, Popup} from "../../../../packages";
import {DemoLine} from "../../Demo/DemoLine";
import {iPopupAlign, iPopupDirection, iPopupTrigger} from "../../../../packages/components/usePopup/utils/popup.utils";
import treeData from '../../../data/tree.data.json';
import button from "../../../../packages/components/Button";
import SearchOutlined from "@ant-design/icons/SearchOutlined";
import RightOutlined from "@ant-design/icons/RightOutlined";

export const demo1 = designPage(() => {

  return () => (
    <DemoRow title="基本用法">
      <Popup>
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>popper content</div>
          </>
        }}
      </Popup>

      <Popup message="popper content" title="Title">
        <span>Span</span>
      </Popup>
      <Popup message="popper content" title="Title">
        <SearchOutlined/>
      </Popup>

    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const directions = ['top', 'bottom', 'left', 'right'] as iPopupDirection[];
  const aligns = ['start', 'center', 'end'] as iPopupAlign[];

  return () => (
    <DemoRow title="方向位置">
      {directions.map(direction => (
        <DemoLine key={direction}>
          <ButtonGroup>
            <Popup placement={direction} key="default">
              {{
                default: () => <Button label={direction}/>,
                popper: () => <>
                  <div style={{ height: '100px' }}>popper content</div>
                </>
              }}
            </Popup>
            {aligns.map(align => (
              <Popup placement={`${direction}-${align}`} key={align}>
                {{
                  default: () => <Button label={`${direction}-${align}`}/>,
                  popper: () => <>
                    <div style={{ height: '100px' }}>popper content</div>
                  </>
                }}
              </Popup>
            ))}
          </ButtonGroup>
        </DemoLine>
      ))}
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    manualValue: false,
  });

  return () => (
    <DemoRow title="触发动作">
      <Popup trigger="hover">
        {{
          default: () => <Button label="Hover"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup trigger="click">
        {{
          default: () => <Button label="Click"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup trigger="focus">
        {{
          default: () => <Button label="Focus"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup trigger="contextmenu">
        {{
          default: () => <Button label="Contextmenu"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup trigger="manual" v-model={state.manualValue}>
        {{
          default: () => <Button label="Manual(Click)" onClick={() => state.manualValue = !state.manualValue}/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>

    </DemoRow>
  );
});


export const demoSize = designPage(() => {

  return () => (
    <DemoRow title="大小尺寸">
      <Popup popperSize="small">
        {{
          default: () => <Button label="Small" size="small"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup popperSize="middle">
        {{
          default: () => <Button label="Normal" size="middle"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup popperSize="large">
        {{
          default: () => <Button label="Large" size="large"/>,
          popper: () => <div>popper content</div>
        }}
      </Popup>

    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const { refs, onRef } = useRefs({ button: Button });

  return () => (
    <DemoRow title="外部Reference">

      <Button label="Outer reference" ref={onRef.button}/>

      <Popup reference={refs.button?.refs.el}>
        {{ popper: () => <div>popper content</div> }}
      </Popup>
    </DemoRow>
  );
});


export const demo5 = designPage(() => {

  return () => (
    <DemoRow title="SizeEqual">

      <Popup sizeEqual>
        {{
          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('colorPrimaryActive')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Vertical</div>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
      <Popup placement="right" sizeEqual>
        {{
          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('colorPrimaryActive')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Horizontal</div>,
          popper: () => <div>popper content</div>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demo6 = designPage(() => {

  return () => (
    <DemoRow title="过度动画">

      <p>fade动画一般用于Tooltip</p>
      <p>drop动画一般用于dropdown</p>
      <p>slide动画一般用于下拉表单组件</p>
      <p>scale一般用于提示信息</p>
      <p>direction-scale一般不用</p>

      <Popup animation="fade">
        {{
          default: () => <Button label="fade"/>,
          popper: () => <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        }}
      </Popup>
      <Popup animation="slide">
        {{
          default: () => <Button label="slide"/>,
          popper: () => <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        }}
      </Popup>
      <Popup animation="scale">
        {{
          default: () => <Button label="scale"/>,
          popper: () => <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        }}
      </Popup>
      <Popup animation="scale-y">
        {{
          default: () => <Button label="scale-y"/>,
          popper: () => <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        }}
      </Popup>
      <Popup animation="drop">
        {{
          default: () => <Button label="drop"/>,
          popper: () => <div>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demo7 = designPage(() => {

  const state = reactive({
    show: false,
    open: false,
  });

  return () => (
    <DemoRow title="show & open">
      <Checkbox label="show" v-model={state.show}/>
      <Checkbox label="open" v-model={state.open}/>

      <Popup v-model={state.show} v-model:open={state.open}>
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>popper content</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demo8 = designPage(() => {

  const state = reactive({
    isShow: false,
    config: {
      direction: 'bottom' as any,
      align: 'start' as any,
      animation: 'drop' as any,
      showArrow: true,
      trigger: 'click' as any,
    }
  });

  const directions = ['top', 'bottom', 'left', 'right'];
  const aligns = ['start', 'center', 'end'];
  const animations = [
    'fade',
    'slide',
    'drop',
    'scale',
    'scale-y',
  ];

  return () => (
    <DemoRow title="综合示例">
      <Popup
        placement={`${state.config.direction}-${state.config.align}` as any}
        trigger={state.config.trigger}
        animation={state.config.animation}
        arrowSize={state.config.showArrow ? undefined : 0}
      >
        {{
          default: () => <Button label="Button" onClick={() => {state.config.trigger === 'manual' && (state.isShow = !state.isShow);}}/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>popper content</div>
          </>
        }}
      </Popup>

      <DemoLine title="directions">
        <ButtonGroup>
          {directions.map(direction => <Button label={direction} onClick={() => state.config.direction = direction} key={direction} type={state.config.direction === direction ? 'primary' : undefined}/>)}
        </ButtonGroup>
      </DemoLine>

      <DemoLine title="aligns">
        <ButtonGroup>
          {aligns.map(align => <Button label={align} onClick={() => state.config.align = align} key={align} type={state.config.align === align ? 'primary' : undefined}/>)}
        </ButtonGroup>
      </DemoLine>

      <DemoLine title="animations">
        <ButtonGroup>
          {animations.map(animation => <Button label={animation} onClick={() => state.config.animation = animation} key={animation} type={state.config.animation === animation ? 'primary' : undefined}/>)}
        </ButtonGroup>
      </DemoLine>

      <DemoLine title="show arrow">
        <Checkbox label="arrow" v-model={state.config.showArrow}/>
      </DemoLine>

    </DemoRow>
  );
});


export const demo10 = designPage(() => {

  return () => (
    <DemoRow title="设置宽高">
      <p>只有设置高度的时候使用Scroll滚动条容器</p>
      <Popup height="100px" width="200px">
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
            ---
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demo11 = designPage(() => {

  return () => (
    <DemoRow title="去掉默认内边距">
      <Popup noPadding>
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demo12 = designPage(() => {

  const state = reactive({
    disabled: false,
  });

  return () => (
    <DemoRow title="禁用">
      <Checkbox v-model={state.disabled} label="disabled"/>
      <Popup disabled={state.disabled}>
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demoDestroy = designPage(() => {

  const state = reactive({
    destroyOnClose: true,
  });

  return () => (
    <DemoRow title="关闭的时候销毁内容">
      <Checkbox label="destroyOnClose" v-model={state.destroyOnClose}/>
      <Popup key={String(state.destroyOnClose)} destroyOnClose={state.destroyOnClose} animation="slide" trigger="click">
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
            <Input style={{ margin: '16px 0' }}/>
          </>
        }}
      </Popup>
      {/*{directions.map(direction => (
        <DemoLine key={direction}>
          <ButtonGroup>
            <Popup placement={direction as any} key="default" destroyOnClose>
              {{
                default: () => <Button label={direction}/>,
                popper: () => <>
                  <div style={{ height: '100px' }}>popper content</div>
                </>
              }}
            </Popup>
            {aligns.map(align => (
              <Popup placement={`${direction}-${align}` as any} key={align} destroyOnClose>
                {{
                  default: () => <Button label={`${direction}-${align}`}/>,
                  popper: () => <>
                    <div style={{ height: '100px' }}>popper content</div>
                  </>
                }}
              </Popup>
            ))}
          </ButtonGroup>
        </DemoLine>
      ))}*/}
    </DemoRow>
  );
});

export const demoContext = designPage(() => {

  const Parent = designComponent({
    slots: ['default'],
    setup({ slots }) {
      const state = reactive({ count: 100 });
      provide('demo_context', state);
      let timer: any;
      onMounted(() => {
        timer = setInterval(() => {state.count++;}, 1000);
      });
      onBeforeUnmount(() => {
        clearInterval(timer);
      });
      return () => slots.default();
    },
  });

  const Child = designComponent({
    setup() {
      const parentState = inject<null | { count: number }>('demo_context', null);
      return () => (
        <button>{parentState?.count || '无'}</button>
      );
    },
  });

  return () => (
    <DemoRow title="组件上下文">
      <Parent>
        <Popup>
          {{
            default: () => <Button label="Button"/>,
            popper: () => <>
              <Child/>
              <div>桃花坞里桃花庵；</div>
              <div>桃花庵里桃花仙；</div>
              <div>桃花仙人种桃树；</div>
              <div>又摘桃花换酒钱；</div>
            </>
          }}
        </Popup>
      </Parent>
    </DemoRow>
  );
});

interface iDemoTreeMeta {
  id: string,
  name: string,
  subs?: iDemoTreeMeta[]
}

export const demoCascade = designPage(() => {

  const state = reactive({
    showClickDemo: false,
    showHoverDemo: false,
    demo3: false,
    demo4: false,
  });

  const renderList = (list: iDemoTreeMeta[], trigger?: iPopupTrigger) => (
    list.map(item => (
      !!item.subs?.length ? (
          <Popup key={item.name} placement="right-start" arrowSize={0} offset={12} hideOnClickReference={false} trigger={trigger}>
            {{
              default: () => (
                <div
                  style={{
                    minWidth: '100px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    padding: '4px 0',
                  }}>
                  <span>{item.name}</span>
                  <RightOutlined/>
                </div>
              ),
              popper: () => renderList(item.subs!)
            }}
          </Popup>
        )
        : (
          <div
            key={item.name}
            style={{
              minWidth: '100px',
              padding: '4px 0',
            }} onClick={() => handleClickItem(item)}>
            <span>{item.name}</span>
          </div>
        )
    ))
  );

  const handleClickItem = (item: iDemoTreeMeta) => {
    $message(item.name);
    state.showClickDemo = false;
    state.showHoverDemo = false;
    state.demo3 = false;
    state.demo4 = false;
  };

  return () => (
    <DemoRow title="父子级联">
      <Popup trigger="hover" v-model={state.showHoverDemo}>
        {{
          default: () => <Button label="Hover"/>,
          popper: () => renderList(treeData)
        }}
      </Popup>
      <Popup trigger="click" v-model={state.showClickDemo}>
        {{
          default: () => <Button label="Click"/>,
          popper: () => renderList(treeData)
        }}
      </Popup>
      <Popup trigger="click" v-model={state.demo3}>
        {{
          default: () => <Button label="ParentClick, ChildHover"/>,
          popper: () => renderList(treeData, "hover")
        }}
      </Popup>
      <Popup trigger="contextmenu" v-model={state.demo4}>
        {{
          default: () => <Button label="ParentContextmenu, ChildHover"/>,
          popper: () => renderList(treeData, "hover")
        }}
      </Popup>
    </DemoRow>
  );
});

export const demoMinWidth = designPage(() => {
  return () => (
    <DemoRow title="最小宽度">
      <Popup minHeight={150} placement="right-start">
        {{
          default: () => <Button label="Button"/>,
          head: () => <span>Title</span>,
          popper: () => <>
            <div>popper content</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});

export const demoDark = designPage(() => {
  return () => (
    <DemoRow title="黑色主题">
      <Popup dark>
        {{
          default: () => <Button label="Button"/>,
          popper: () => <>
            <div>Ctrl + Shift + A</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});


export const demoStatus = designPage(() => {
  return () => (
    <DemoRow title="状态">
      {(['warning', 'error'] as const).map(status => (
        <Popup status={status} key={status}>
          {{
            default: () => <Button status={status} label={status}/>,
            popper: () => <>
              <div>输入有误，不是合法的表达式</div>
            </>
          }}
        </Popup>
      ))}
    </DemoRow>
  );
});

export const demoCover = designPage(() => {
  return () => (
    <DemoRow title="覆盖reference">
      <Popup cover modelValue trigger="manual">
        {{
          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('colorPrimaryBgHover')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>,
          popper: () => (
            <div style={{ height: '100%', width: '100%', boxSizing: 'border-box', border: `solid 1px var(--${getComponentCls('colorPrimaryActive')})`, pointerEvents: 'none' }}>
              <div style={{ position: 'absolute', right: 0, bottom: 0, padding: '8px', pointerEvents: 'auto' }}>
                1/6
              </div>
            </div>
          )
        }}
      </Popup>
    </DemoRow>
  );
});


export const demoNoBg = designPage(() => {
  return () => (
    <DemoRow title="取消背景色">
      <Popup noBackground>
        {{
          default: () => <Button label="Button"/>,
          popper: () => <>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </>
        }}
      </Popup>
    </DemoRow>
  );
});
